<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>瀑布流新闻页</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
	html,body,ul,li,p,div{
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	ul,li{
		list-style: none;
	}
  .wrap{
  	width: 900px;
		margin: 0 auto;
  }
	.clearfix:after{
		content: '';
		display: block;
		clear: both;
	}
	#pic-ct{
		position: relative;
	}
	#pic-ct .item{
		position: absolute;
		padding: 0 0 10px 0;
		width: 280px;
		margin: 10px;
		border: 1px solid #DFDFDF;
		background: #FFF;
		opacity: 0;
		transition: all .8s;
	}
	#pic-ct .item img{
	    margin: 10px;
	    width: 260px;
	}
	#pic-ct .item .header{
		height: 25px;
    margin: 0 12px;
    border-bottom: 1px solid #DBDBDB;
	}
	#pic-ct .desp{
		font-size: 12px;
		line-height: 1.8;
	  margin: 10px 15px 0;
	  color: #777371;
	}
	#load{
		visibility: hidden;
		height: 20px;
	}
	.hide{
		display: none;
	}
</style>
</head>
<body>
	 <div class="wrap">
    <div class="ct-waterfall">
    	<ul id="pic-ct" class="clearfix">
				<li class="item hide"></li>
    	</ul>
    	<div id="load">我是看不见的</div>
    </div>
	</div>
</body>

<script>
	var curPage = 1
	var perPageCount = 9
	var isDataArrive = true

	start()

	function start(){
		getData(function(newsList){
			isDataArrive = true
			$.each(newsList, function(idx, news){
				var $node = getNode(news)
				$node.find('img').on('load',function(){
					$('#pic-ct').append($node)
					waterFallPlace($node)
				})
			})
		})
		isDataArrive = false
	}

	//获取数据
	function getData(callback){
		$.ajax({
			url: 'https://platform.sina.com.cn/slide/album_tech',
			dataType: 'jsonp',   
			jsonp:"jsoncallback",
			data: {
				app_key: '1271687855',
				num: perPageCount,
				page: curPage
			}
		}).done(function(ret){
			if(ret && ret.status && ret.status.code === "0"){
				callback(ret.data);   //如果数据没问题，那么生成节点并摆放好位置
				curPage++
			}else{
				console.log('get error data');
			}
		});
	}

	//拼接dom
	function getNode(item){
		var tpl = ''
			tpl += '<li class="item">';
			tpl += ' <a href="'+ item.url +'" class="link"><img src="' + item.img_url + '" alt=""></a>';
			tpl += ' <h4 class="header">'+ item.short_name +'</h4>';
			tpl += '<p class="desp">'+item.name+'</p>';
			tpl += '</li>';	
		return $(tpl)
	}

	//检测是否滑到了底部
	function isVisible($el){
	  var scrollH = $(window).scrollTop(),
	  	  winH = $(window).height(),
	  	  top = $el.offset().top;
		  if(top < winH + scrollH + 100){
		  	return true;
		  }else{
		  	return false;
		  }
	}
	//检测页面滚动效果
	var clock;
	$(window).on('scroll', function(){
		if(!isDataArrive) return
		if(clock){
		  clearTimeout(clock);
		}
		clock = setTimeout(function(){
		  if(isVisible($('#load'))){
				start()
			}
		}, 100);
	});

//瀑布流排版
var colSumHeight = [],
		nodeWidth = $('.item').outerWidth(true),
		colNum = parseInt($('#pic-ct').width()/nodeWidth);

for(var i=0; i<colNum; i++){
	colSumHeight.push(0)
}

function waterFallPlace($nodes){
	$nodes.each(function(){
		var $cur = $(this)
		var minSumHeight = colSumHeight[0]
		var idx = 0
		for(var i=0;i<colSumHeight.length; i++){
			if(colSumHeight[i] < minSumHeight){
				minSumHeight = colSumHeight[i]
				idx = i
			}
		}
		//图片摆放位置
		$cur.css({
			left: nodeWidth*idx,
			top: minSumHeight,
			opacity: 1
		});
		//为数组内对应的列添加高度
		colSumHeight[idx] = $cur.outerHeight(true) + colSumHeight[idx];
		$('#pic-ct').height(Math.max.apply(null,colSumHeight));
	});

}

</script>

</html>
